(function () {
    $.fn.extend({
        dxtmodal:function (options) {
            var defaults = {
                title:'Modal Box',
                width:350,
                height:200,
                showMask:true,
                cssOptions:{titleColor:'#fff', titleBg:'#EFB632'},
                ajax:{url:'', method:'post', contentType:'text/html',data:'', callback:function (data) {
                }}
            };

            options = $.extend(defaults, options);

            var mask = $("<div id='dxt-mask'></div>");
            var box = $("<div id='dxt-box'></div>");

            //Hide mask and popup
            var mdHide = function () {
                $(document).unbind("keydown", escapeHandler);

                var remove = function () {
                    $(this).remove();
                };


                $(mask).fadeOut(remove);
                $(box).fadeOut(remove);
            };

            //Our function that listens for escape key.
            var escapeHandler = function (e) {
                if (e.keyCode == 27) {
                    mdHide();
                }
            };

            $(window).resize(function () {

                //Get the screen height and width
                var maskHeight = $(document).height();
                var maskWidth = $(window).width();

                //Set height and width to mask to fill up the whole screen
                $(mask).css({'width':maskWidth, 'height':maskHeight});

                //Get the window height and width
                var winH = $(window).height();
                var winW = $(window).width();

                //Set the popup window to center
                $(box).css('top', winH / 2 - options.height / 2);
                $(box).css('left', winW / 2 - options.width / 2);

            });

            var buildBox = function(mdContent){
                var mdTitle = $('<div id="mdTitle">'+options.title+'</div>').css('color',options.cssOptions.titleColor);
                $(mdTitle).css('background',options.cssOptions.titleBg);

                var closebt = $('<a title="Close">x</a>');
                $(closebt).css('color', options.cssOptions.titleColor);
                $(closebt).css('line-height', '30px');
                $(closebt).css('font-size', '12px');
                $(closebt).css('float', 'right');
                $(closebt).css('padding', '0px 5px');
                $(closebt).css('cursor', 'pointer');
                $(closebt).hover(function () {
                    $(this).css('color', '#000');
                }, function () {
                    $(this).css('color', options.cssOptions.titleColor);
                });

                $(closebt).click(function () {
                    mdHide();
                    return false;
                });
                $(mdTitle).append($(closebt));


                //Build box
                $(box).empty();
                $(box).append(mdTitle);
                $(box).append(mdContent);

                //show box
                $("body").append(box);

                //Get the window height and width
                var winH = $(window).height();
                var winW = $(window).width();

                //Set the popup window to center
                $(box).addClass('window');
                $(box).css('width', options.width + 'px');
                $(box).css('height', options.height + 'px');
                $(box).css('top', winH / 2 - options.height / 2);
                $(box).css('left', winW / 2 - options.width / 2);
                $(box).css("opacity", 0.8);

                $(mdContent).css('height', $(box).height()-40);
                $(box).fadeIn(300);
            };

            var showMask = function(){
                $('body').append(mask.click(mdHide));

                //Get the screen height and width
                var maskHeight = $(document).height();
                var maskWidth = $(window).width();

                $(mask).css({'width':maskWidth, 'height':maskHeight});

                //transition effect
                $(mask).fadeIn(1000);
                $(mask).fadeTo("slow", 0.8);
            }

            return $(this).click(function (e) {

                var mdContent = $('<div id="mdContent"></div>');
                var url = '';

                if(options.ajax.url){
                    url = options.ajax.url;
                }else if($(this).attr('href') !== undefined && $(this).attr('href') !== ''){
                    url = $(this).attr('href');
                }
                
                if(url != ''){
                    $.ajax({
                        url:url,
                        cache:false,
                        //contentType:options.ajax.contentType,
                        data:options.ajax.data,
                        type:options.ajax.method,
                        success:function(data){

                            $(mdContent).append(data);

                            if(options.showMask)
                                showMask();
                            buildBox(mdContent);
                        }
                    });
                }else{
                    if(options.showMask)
                        showMask();
                    buildBox(mdContent);
                }

                e.preventDefault();
                $(document).keydown(escapeHandler);

                return false;
            });
        }
    });
})(jQuery);